<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>服务工作者线程消息</title>
</head>
<body>
  <script>
    navigator.serviceWorker.onmessage = ({ data }) => {
      console.log('client heard:', data);
    };
    (async () => {
      const registration = await navigator.serviceWorker.register('./27_4_9_serviceWorker.js');
      registration.active?.postMessage('foo');
      // 也可以简单地使用 serviceWorker.controller 属性
      navigator.serviceWorker.controller?.postMessage('foo');
    })();

    // service worker heard: foo
    // client heard: bar
    // service worker heard: foo
    // client heard: bar
  </script>
</body>
</html>